<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>星级评分特效</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
    body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
    table{border-collapse:collapse;border-spacing:0;}
    body{background: #f3f3f3;font-family: Microsoft YaHei;position: relative}
    input{padding: 0;margin: 0;}
    .panel{width:800px;height:400px;margin: 0 auto;overflow: hidden;position: absolute;left: 50%;top:50%;margin-left: -400px;margin-top: 200px;}
    .panel_tit{background: #282828;color: #fff;float: left;width: 70px;height: 100%;text-align: center; }
    .panel_tit span.num{background: #bf1e2e;height: 70px;width: 100%;display: block;text-align: center;line-height: 70px;font-size: 30px;}
    .panel_tit span.title{padding-top: 23px;display: inline-block}
    .panel_body{background: url(images/logo.jpg) right bottom no-repeat #fff;height: 210px;width: 540px;padding: 95px;float: left;font-size: 14px;}
    .panel_body tr{padding-bottom: 10px;display: -webkit-box;}
    .panel_body td{}
    .panel_body td.td_tit{width: 85px;vertical-align: middle;}
    .panel_body td.star .icon{width: 28px;height: 28px;display: inline-block;background: url(images/star.png) center center no-repeat;padding: 0 3px;cursor:pointer; }
    .panel_body td.star .icon.on{background-image:url(images/star_on.png);}
    .panel_body td.remark .score{color: #bf1e2e;padding:0  5px 0 15px;}
</style>
</head>
<body>
    <div class="panel">
        <div class="panel_tit">
            <span class="num">3</span><span class="title">星<br>级<br>评<br>评<br>特<br>效</span>
        </div>
        <div class="panel_body">
            <table>
                <tbody>
                    <tr>
                        <td class="td_tit">星级评分：</td>
                        <td class="star"><span class="icon on"></span><span class="icon"></span><span class="icon"></span><span class="icon"></span><span class="icon"></span></td>
                        <td class="remark"><span class="score">1分</span>  <span class="degree">效果太差，兼容性完成不行</span></td>
                    </tr>
                    <tr>
                        <td class="td_tit">星级评分：</td>
                        <td class="star"><span class="icon on"></span><span class="icon"></span><span class="icon"></span><span class="icon"></span><span class="icon"></span></td>
                        <td class="remark"><span class="score">1分</span>  <span class="degree">效果太差，兼容性完成不行</span></td>
                    </tr>
                    <tr>
                        <td class="td_tit">星级评分：</td>
                        <td class="star"><span class="icon on"></span><span class="icon"></span><span class="icon"></span><span class="icon"></span><span class="icon"></span></td>
                        <td class="remark"><span class="score">1分</span>  <span class="degree">效果太差，兼容性完成不行</span></td>
                    </tr>
                    <tr>
                        <td class="td_tit">星级评分：</td>
                        <td class="star"><span class="icon on"></span><span class="icon"></span><span class="icon"></span><span class="icon"></span><span class="icon"></span></td>
                        <td class="remark"><span class="score">1分</span>  <span class="degree">效果太差，兼容性完成不行</span></td>
                    </tr>
                    <tr>
                        <td class="td_tit">星级评分：</td>
                        <td class="star"><span class="icon on"></span><span class="icon"></span><span class="icon"></span><span class="icon"></span><span class="icon"></span></td>
                        <td class="remark"><span class="score">1分</span>  <span class="degree">效果太差，兼容性完成不行</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script src="jquery2.1.1.min.js"></script>
    <script>
        $(document).ready(function(){
            var score = ['1分','2分','3分','4分','5分']
            var degree = ['效果太差，兼容性完成不行','效果不太好，个别浏览器不兼容','效果一般，特效过渡不好','效果很好，如果能再方便操作点就好了','效果非常完美，五星好评'];
            var star = $(".star .icon");
            var remark = $(".remark");
            var star_len = $(".star .icon").length;
            star.hover(function(){

                    var index = $(this).index();
                    $(this).parents(".star").find(".icon").removeClass("on");
                    for(var i=0; i<index+1; i++){
                        $(this).parents(".star").find(".icon").eq(i).addClass("on");
                    }
                    $(this).parents("tr").find(".score").text(score[index]);
                    $(this).parents("tr").find(".degree").text(degree[index]);
                
            },function(){
                if($(this).parents(".star").find(".icon").hasClass('select')){
                    var index = $(this).parents(".star").find(".select").index();
                    $(this).parents(".star").find(".icon").removeClass("on");
                    for(var i=0; i<index+1; i++){
                        $(this).parents(".star").find(".icon").eq(i).addClass("on");
                    }
                    $(this).parents("tr").find(".score").text(score[index]);
                    $(this).parents("tr").find(".degree").text(degree[index]);
                    return;
                }else{
                    $(this).parents(".star").find(".icon").removeClass("on");
                    $(this).parents(".star").find(".icon").eq(0).addClass("on");
                    $(this).parents("tr").find(".score").text(score[0]);
                    $(this).parents("tr").find(".degree").text(degree[0]);
                }
                
            })
            star.click(function(){
                var index = $(this).index();
                $(this).parents(".star").find(".icon").removeClass("select");
                $(this).addClass("select");
                $(this).parents(".star").find(".icon").removeClass("on");
                for(var i=0; i<index+1; i++){
                    $(this).parents(".star").find(".icon").eq(i).addClass("on");
                }
                $(this).parents("tr").find(".score").text(score[index]);
                $(this).parents("tr").find(".degree").text(degree[index]);
            })
        });
    </script>

</body>
</html>